<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      label-position="left"
      label-width="120px"
    >
      <div class="module-title">评价指标</div>
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in formDataArr" :key="index">
          <el-form-item :label="item.label + ' :'" :prop="item.name" class="fw-600 text-16px">
            <span class="fw-500">得分权重</span>
            <el-input-number
            :min="0" :max="100"
             v-model="formData[item.name]"
             placeholder=""
             class="gw-input-width-60 ml-1 mr-1 fw-600"
             :controls="false"
             @change="changeScore($event, item.name)"
            />
            <span>%</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="error-tips" v-if="indicatorWeightError">{{ indicatorWeightError }}</div>
    <div class="type-tips">
      <div class="fw-600 text-14px">
        <span>目前已分配:</span>
        <span class="ml-5px mr-5px">{{ totalWeight }}%</span>
        <span v-show="remainingWeight >= 0" class="mr-15px">
          <span>剩余:</span>
          <span class="ml-5px mr-5px">{{ remainingWeight }}%</span>
        </span>
        <span class="error-tips" v-show="remainingWeight < 0">已超过综合总值, 请重新分配</span>
      </div>
      <div class="mt-16px">备注：</div>
      <div>输入范围：1至100</div>
      <div>所有指标权比值综合为100%</div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button @click="submitForm" type="primary">确定</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { EvaluationTaskApi, EvaluationTaskVO } from '@/api/multiModel/evaluationtask'

/** 评测任务 表单 */
defineOptions({ name: 'EditScore' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('自定义指标评分权重') // 弹窗的标题
const formData = ref<EvaluationTaskVO>({
  id: 0,
  name: '',
  type: 0,
  datasetTypeIds: '',
  largeModelIds: '',
  status: 0,
  indicator1Weight: 0,
  indicator2Weight : 0,
  indicator3Weight : 0,
  indicator4Weight : 0,
  indicator5Weight : 0,
  indicator6Weight : 0,
  indicator7Weight : 0,
  indicator8Weight : 0,
  indicator9Weight : 0
})
const formRef = ref() // 表单 Ref
const indicatorWeightError = ref('')

let formDataArr = [
  { label: 'rouge_1', name:  'indicator1Weight' },
  { label: 'rouge_2', name:  'indicator2Weight' },
  { label: 'rouge_l', name:  'indicator3Weight' },
  { label: 'bleu_1_gram', name:  'indicator4Weight' },
  { label: 'bleu_2_gram', name:  'indicator5Weight' },
  { label: 'bleu_3_gram', name:  'indicator6Weight' },
  { label: 'bleu_4_gram', name:  'indicator7Weight' },
  { label: '准确率', name:  'indicator8Weight' },
  { label: 'f1分数', name:  'indicator9Weight' }
]

/** 打开弹窗 */
const open = async (data:EvaluationTaskVO) => {
  dialogVisible.value = true
  resetForm()
  formData.value = data
  getTotalWeight()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  indicatorWeightError.value = ''
  checkIndicatorWeight()
  if (!indicatorWeightError.value) {
    // 提交请求
    try {
      let params:any = {}
      formDataArr.forEach(data => {
        params[data.name] = formData.value[data.name]
      })
      params.id = formData.value.id
      await EvaluationTaskApi.updateEvaluationWeight(params)
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    } catch(e:any) {
      
    }
  }
}
const totalWeight = ref(0)
const remainingWeight = ref(0)
const getTotalWeight = () => {
  let total = 0
  for ( let i = 0; i < formDataArr.length; i++ ) {
    total += formData.value[formDataArr[i].name] * 1
  }
  totalWeight.value = total
  remainingWeight.value = 100 - total
}
const checkIndicatorWeight = () => {
  let total = 0
  for ( let i = 0; i < formDataArr.length; i++ ) {
    total += formData.value[formDataArr[i].name] * 1
  }
  if (total !== 100) {
    indicatorWeightError.value = '所有指标权比值总和必须为100%'
    return false
  }
  return true 
}
const changeScore = (e, name) => {
  if (e === null) {
    formData.value[name] = 0
  }
  getTotalWeight()
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: 0,
    name: '',
    type: 0,
    datasetTypeIds: '',
    largeModelIds: '',
    status: 0,
    indicator1Weight: 0,
    indicator2Weight : 0,
    indicator3Weight : 0,
    indicator4Weight : 0,
    indicator5Weight : 0,
    indicator6Weight : 0,
    indicator7Weight : 0,
    indicator8Weight : 0,
    indicator9Weight : 0
  }
  formRef.value?.resetFields()
  totalWeight.value = 0
  remainingWeight.value = 100
}
</script>
<style lang="scss" scoped>
.module-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  line-height: 24px;
  margin-left: 16px;
  margin-bottom: 16px;
  position: relative;
  &::before {
    position: absolute;
    z-index: 10;
    display: block;
    width: 4px;
    height: 24px;
    left: -16px;
    background-color: var(--el-color-primary);
    content: '';
  }
}
.radio-font {
  font-weight: 700;
}
.model-add {
  font-weight: 700;
  color: #171717;
  cursor: pointer;
  font-size: 16px;
}
.type-tips {
  font-size: 14px;
  color: #585858;
  line-height: 24px;
  // margin-top: -16px;
  margin-bottom: 11px;
}
.error-tips {
  color: var(--el-color-danger);
  margin-bottom: 8px;
}
</style>